<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/mui.min.js"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">气象图例</h1>
		</header>
		<div class="mui-content">
			<div>
				<ul class="mui-table-view mui-grid-view mui-grid" style="background: #FFFFFF;">
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
						<img id="temp" onclick="doTap(id)" src="../../images/zgdt.png" style="width: 100%; height: 100%;" />
						<div>气温</div>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
						<img id="rain" onclick="doTap(id)" src="../../images/zgdt.png" style="width: 100%; height: 100%;" />
						<div>云雨</div>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view mui-grid" style="background: #FFFFFF;">
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
						<img id="wind" onclick="doTap(id)" src="../../images/zgdt.png" style="width: 100%; height: 100%;" />
						<div>风势</div>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
						<img id="vis" onclick="doTap(id)" src="../../images/zgdt.png" style="width: 100%; height: 100%;" />
						<div>能见度</div>
					</li>
				</ul>
				<ul class="mui-table-view mui-grid-view mui-grid" style="background: #FFFFFF;">
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
						<img id="freez" onclick="doTap(id)" src="../../images/zgdt.png" style="width: 100%; height: 100%;" />
						<div>凝冻</div>
					</li>
				</ul>
				<div style="text-align: center;margin-top: 10px;" id="nowTime">当前图示:2018年11月27日xx时</div>
				<div style="text-align: center;margin-top: 10px;" id="originTime">图源更新:2018年11月27日xx时</div>
			</div>
		</div>

		<script src="../../js/jquery-3.2.1.js"></script>
		<script src="../../js/global.js"></script>
		<script>
			mui.plusReady(function() {});
			$(document).ready(function() {
				map_load();
			});

			var now_time;
			var now_data_hour;
			var now_data;
			var orgin_data;
			var time_analyse;
			var now_data_num;

			function map_load() {
				now_time = new Date();
				now_data = dateFtt("当前图示:yyyy年MM月dd日hh时", now_time);
				document.getElementById('nowTime').innerHTML = now_data;
				time_analyse = now_time.getTime();
				now_data_hour = parseInt(dateFtt("hh", now_time));
				if(now_data_hour >= 0 && now_data_hour < 5) {
					time_analyse = time_analyse - (now_data_hour + 1) * 3600 * 1000;
				} else if(now_data_hour >= 5 && now_data_hour <= 11) {
					time_analyse = time_analyse - (now_data_hour - 5) * 3600 * 1000;
				} else if(now_data_hour >= 11 && now_data_hour < 17) {
					time_analyse = time_analyse - (now_data_hour - 11) * 3600 * 1000;
				} else if(now_data_hour >= 17 && now_data_hour < 23) {
					time_analyse = time_analyse - (now_data_hour - 17) * 3600 * 1000;
				}
				orgin_data = dateFtt("图源更新:yyyy年MM月dd日hh时", new Date(time_analyse));
				document.getElementById('originTime').innerHTML = orgin_data;
				now_data_num = dateFtt("yyyyMMddhh", now_time);
				checkUrl(WEATHER_MAP + "temp/guiyang_temp_" + now_data_num + ".png");
				var type_arr = ['temp', 'rain', 'wind', 'vis', 'freez'];
				for(var i = 0; i < type_arr.length; i++) {
					document.getElementById(type_arr[i]).src = WEATHER_MAP + type_arr[i] + "/guiyang_" + type_arr[i] + "_" + now_data_num + ".png";
				}
			}

			///**************************************时间格式化处理************************************/
			function dateFtt(fmt, date) { //author: meizz   
				var o = {
					"M+": date.getMonth() + 1, //月份   
					"d+": date.getDate(), //日   
					"h+": date.getHours(), //小时   
					"m+": date.getMinutes(), //分   
					"s+": date.getSeconds(), //秒   
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
					"S": date.getMilliseconds() //毫秒   
				};
				if(/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for(var k in o)
					if(new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
				return fmt;
			}

			//判断url是否有效
			function checkUrl(check_url) {
				$.ajax({
					url: check_url,
					type: 'GET',
					complete: function(response) {
						if(response.status != 200) {
							mui.toast('获取数据失败！');
						}
					}
				});
			}

			//点击各图
			function doTap(id) {
				plus.storage.setItem("mapUrl", WEATHER_MAP + id + "/guiyang_" + id + "_" + now_data_num + ".png");
				//				console.log("mapUrl--"+plus.storage.getItem("mapUrl"));
				plus.storage.setItem("mapType", id);
				//				console.log("mapType-"+id);
				plus.storage.setItem("nowTime", now_time.getTime().toString());
				//				console.log("nowTime--"+plus.storage.getItem("nowTime"));
				mui.openWindow({
					url: 'mapInfo.html',
					id: 'mapInfo.html',
					show: {
						anishow: 'pop-in'
					},
					styles: {
						popGesture: 'close'
					},
					waiting: {
						autoshow: true
					}
				});
			}
		</script>
	</body>

</html>